<template>
    <view class="find-report">
        <view class="find-report-header">
            <view class="find-report-header-title">
                *请选择违规类型
            </view>
        </view>
        <view class="find-report-list">
            <view class="find-report-item" v-for="(item, index) in reportList" :key="index"
                @click="selectReport(item, index)">
                <view class="find-report-item-icon">
                    <image
                        :src="item.checked ? 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-check.png' : 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-check-def.png'">
                    </image>
                </view>
                <view class="find-report-item-title">
                    {{ item.name }}
                </view>
            </view>
        </view>
        <view class="find-report-fotter">
            <view class="btns">
                <image class="btns-img" src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/btn/220 × 42.png" mode=""></image>
                <view class="btns-con" @click="submit()">
                    提交
                </view>
            </view>
        </view>
        <popup ref="popup">
            <view class="popup">
                <image class="popup-vip" src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/submitto.png" mode=""></image>
                <view class="popup-te">提交成功</view>
                <view class="popup-desc">
                    审核结果会在24小时内以系统消息的方式通知请耐心等待~
                </view>
                <view class="btns">
                    <image class="btns-img" src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/btn/220 × 42.png" mode=""></image>
                    <view class="btns-con" @click="Hide()">
                        好的
                    </view>
                </view>
            </view>
        </popup>
    </view>
</template>

<script>
import popup from '@/components/popup/index.vue'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
    // 组件名称
    name: 'demo',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件,import引入的组件需要注入到对象中才能使用
    components: {
        popup,
    },
    // 组件状态值
    data() {
        return {
            reportList: [
                // {
                //     name: '存在违反国家法律法规的内容',
                //     checked: true
                // },
                // {
                //     name: '存在色情、淫秽、低俗等不适内容',
                //     checked: false
                // },
                // {
                //     name: '存在辱骂、中伤、诽谤他人等内容',
                //     checked: false
                // },
                // {
                //     name: '存在广告、营销、站外联系方法等内容',
                //     checked: false
                // },
                // {
                //     name: '存在泄露他人隐私信息的内容',
                //     checked: false
                // },
                // {
                //     name: '存在涉及未成年人不良信息的内容',
                //     checked: false
                // },
                // {
                //     name: '存在网络暴力的内容',
                //     checked: false
                // },
                // {
                //     name: '存在诱导、欺诈的行为或内容',
                //     checked: false
                // },
            ],
            types: '',
            option: {
                type: 1,
                id: ''
            },
            is_success: false // 提交成功 弹窗
        }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
        // 选择举报类型
        selectReport(item, index) {
            this.reportList.forEach((item, index) => {
                item.checked = false
            })
            item.checked = true
            this.types = item.name
        },
        // 提交
        submit() {
            this.$http('report.trendReport', {
                trend: this.option.id, // 动态id
                type: this.types, // 举报类型
            }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    this.Show()
                } else {
                    this.$utils.toast(res.info)
                }
            })
        },
        // 打开弹窗
        Show() {
            this.$refs.popup.show = true
            console.log(this.$refs.popup)
        },
        // 隐藏弹窗
        Hide() {
            this.$refs.popup.show = false
        },
        getCommond(){
            this.$http('config.commond', {
				code: 'TrendsReport'
			}, '').then(res => {
                console.log(res,'adslkj')
				// this.typeList = res.data
                res.data.forEach((item, index) => {
                    this.reportList.push({
                        name: item,
                        checked: false
                    })
                    // item.checked = false
                    // item.name
                })
			});
        }
    },
    onLoad(option) {
        console.log(option, 'options')
        this.option = option
        // type 1 举报该动态 2 不看TA的动态 3 举报该评论 4 删除该动态
        this.getCommond()
    },
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
     * 在实例初始化之后，组件属性计算之前，如data属性等
     */
    beforeCreate() { },
    /**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() { },
    /**
     * 在挂载开始之前被调用：相关的 render 函数首次被调用。
     */
    beforeMount() { },
    /**
     * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
     * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
     */
    mounted() { },
    /**
     * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
     * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
     */
    beforeUpdate() { },
    /**
     * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
     * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
     */
    updated() { },
    /**
     * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
     */
    activated() { },
    /**
     * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
     */
    deactivated() { },
    /**
     * 实例销毁之前调用。在这一步，实例仍然完全可用。
     */
    beforeDestroy() { },
    /**
     * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
     * 所有的事件监听器会被移除，所有的子实例也会被销毁。
     */
    destroyed() { }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<style scoped lang="scss">
.find-report {
    background: #FAFAFA;
    min-height: 100vh;
    padding-bottom: calc(32rpx + 32rpx + 88rpx + 2rpx + env(safe-area-inset-bottom));
    padding-bottom: calc(32rpx + 32rpx + 88rpx + 2rpx + constant(safe-area-inset-bottom));

    &-header {
        padding: 20rpx 32rpx 32rpx;
        background: #FFFFFF;

        &-title {
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FF7339;
        }
    }

    &-list {
        background: #FFFFFF;
    }

    &-item {
        padding: 32rpx;
        border-top: 2rpx solid #F5F5F5;
        display: flex;
        align-items: center;

        &-icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;

            image {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        &-title {
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #2A2D34;
        }
    }

    &-fotter {
        width: 100%;
        padding: 32rpx;
        background: #FFFFFF;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
        padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));

        .btns {
            width: 576rpx;
            height: 88rpx;
            position: relative;

            &-img {
                width: 100%;
                height: 100%;
            }

            &-con {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                font-size: 32rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #FAFCFF;
                line-height: 88rpx;
                text-align: center;
            }
        }
    }
}

.popup {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 80rpx 0;

    &-vip {
        width: 179.11rpx;
        height: 136rpx;
        margin-bottom: 60rpx;
    }

    &-te {
        text-align: center;
        margin-bottom: 32rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #2E3033;
    }


    &-desc {
        width: 454rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #5C5F66;
        line-height: 44rpx;
    }

    .btns {
        margin-top: 60rpx;
        width: 440rpx;
        height: 84rpx;
        position: relative;

        &-img {
            width: 100%;
            height: 100%;
        }

        &-con {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FAFCFF;
            line-height: 84rpx;
            text-align: center;
        }
    }
}
</style>
